<template>
  <div class="homeView">
    <van-tabs
      v-model="active"
      swipeable
      animated
      sticky
      line-width="32px"
      title-inactive-color="#999"
    >
      <van-tab v-for="(tab, index) in tabs" :key="index" :title="tab" replace>
        <!-- {{ tab.title }} -->
        <HomeFeed v-if="index == 0" />
        <HomeRecommend v-if="index == 1" />
        <HomeHot v-if="index == 2" />
      </van-tab>
    </van-tabs>
    <div class="right">
      <div @click="toSearch">
        <svg
          t="1677415686915"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6270"
          width="26"
          height="26"
        >
          <path
            d="M769.322667 708.992l182.741333 182.698667-60.373333 60.373333-182.698667-182.741333A382.293333 382.293333 0 0 1 469.333333 853.333333c-211.968 0-384-172.032-384-384s172.032-384 384-384 384 172.032 384 384a382.293333 382.293333 0 0 1-84.010666 239.658667z m-85.589334-31.658667A297.685333 297.685333 0 0 0 768 469.333333c0-165.034667-133.674667-298.666667-298.666667-298.666666-165.034667 0-298.666667 133.632-298.666666 298.666666 0 164.992 133.632 298.666667 298.666666 298.666667a297.685333 297.685333 0 0 0 208-84.266667l6.4-6.4z"
            fill="#000000"
            p-id="6271"
          ></path>
        </svg>
      </div>
      <div class="bell">
        <svg
          t="1677134454478"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2896"
          width="22"
          height="22"
        >
          <path
            d="M924.96494 660.872053h-40.825995l-9.568998-280.679959C874.569947 177.976124 717.32597 0.00015 513.196 0.00015a370.304946 370.304946 0 0 0-370.623946 367.433946v293.437957H95.686061A95.685986 95.685986 0 0 0 0.000075 756.558039a95.685986 95.685986 0 0 0 95.685986 95.685986h243.679964v2.232a169.363975 169.363975 0 0 0 339.047951 0v-2.232h246.550964a95.685986 95.685986 0 0 0 95.685985-95.685986 95.685986 95.685986 0 0 0-95.685985-95.685986z m-310.659955 191.371972a105.573985 105.573985 0 0 1-211.466969 0v-2.233h210.827969s0.638 1.914 0.638 2.552z m310.659955-65.06699H95.686061a31.894995 31.894995 0 1 1 0-63.789991h78.781988a31.894995 31.894995 0 0 0 31.894996-31.895995V378.917094a314.169954 314.169954 0 0 1 240.171965-308.109954c200.939971-45.609993 364.244947 120.564982 364.244946 309.384954l9.567999 280.679959v31.894996a31.894995 31.894995 0 0 0 31.895995 31.894995h72.72099a31.894995 31.894995 0 1 1 0 63.789991z"
            p-id="2897"
            fill="#000000"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import HomeRecommend from "../views/HomeRecommend.vue";
import HomeFeed from "../views/HomeFeed.vue";
import HomeHot from "../views/HomeHot.vue";

export default {
  components: {
    HomeRecommend,
    HomeFeed,
    HomeHot,
  },
  data() {
    return {
      tabs: ["关注", "推荐", "热门"],
      active: 1,
    };
  },
  created() {
    // this.$toast.loading({
    //   message: "加载中...",
    //   forbidClick: true,
    //   duration: 0,
    // });
    // this.$axios.get("https://apis.netstart.cn/xpc/home/config").then((res) => {
    //   // console.log(res.data.data);
    //   this.tabs = res.data.data.tab;
    //   this.$toast.clear();
    // });
  },
  methods: {
    toSearch() {
      this.$router.push({ path: "/searching" });
    },
  },
  activated() {},
  deactivated() {},
  destroyed() {
    console.log("destroyed");
  },
};
</script>

<style lang="scss" scoped>
.homeView {
  position: relative;

  :deep(.van-sticky) {
    border-bottom: 1px solid #c8c9cc;
    height: 50px;
    display: flex;
    align-items: center;
    background-color: white;
    width: 100%;
  }

  :deep(.van-tab) {
    font-size: 16px;
    font-weight: bold;
    width: 25vw;
  }

  .right {
    width: 74px;
    height: 49px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999;
    box-shadow: -6px 0 10px white;

    // > div:first-of-type {
    //   margin-left: 10px;
    // }

    > div:last-of-type {
      margin-right: 10px;
    }

    > div {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// .fade-enter-active {
//   transition: transform 0.5s;
// }

// .fade-enter /* .fade-leave-active below version 2.1.8 */ {
//   transform: translateX(0);
// }

// .fade-leave-active {
//   transition: transform  0.5s;
// }

// .fade-leave-to {
//   transform: translateX(-375px);
// }
</style>
